import React, { PureComponent } from 'react';
import moment from 'moment';
import { connect } from 'dva';
import { Link } from 'dva/router';
import { Row, Col, Card, List, Avatar, Icon, Button } from 'antd';
import styles from './Index.less';

const { Meta } = Card;
@connect(({ control,loading }) => ({
  control,
  loading: loading.models.control,
}))
export default class Index extends PureComponent {
  componentWillUnmount() {

  }
  componentDidMount() {
    const { dispatch } = this.props;
    dispatch({
      type: 'control/fetch',
    });
  }

  

  renderActivities() {
    const {
      activities: { list },
    } = this.props;
    return list.map((item) => {
      const events = item.template.split(/@\{([^{}]*)\}/gi).map((key) => {
        if (item[key]) {
          return <a href={item[key].link} key={item[key].name}>{item[key].name}</a>;
        }
        return key;
      });
      return (
        <List.Item key={item.id}>
          <List.Item.Meta
            avatar={<Avatar src={item.user.avatar} />}
            title={
              <span>
                <a className={styles.username}>{item.user.name}</a>
                &nbsp;
                <span className={styles.event}>{events}</span>
              </span>
            }
            description={
              <span className={styles.datetime} title={item.updatedAt}>
                {moment(item.updatedAt).fromNow()}
              </span>
            }
          />
        </List.Item>
      );
    });
  }
  render() {
    const { loading, control: { userinfo } } = this.props;
    return (
      <div>
        <Row gutter={24}>
          <div className={styles.pageHeaderContent}>
            <div className={styles.avatar}>
              <Avatar size="large" src="https://gw.alipayobjects.com/zos/rmsportal/BiazfanxmamNRoxxVxka.png" />
            </div>
            <div className={styles.content}>
              <div className={styles.contentTitle}>{userinfo.userName}，祝你开心每一天！</div>
            </div>
            <div className={styles.pageHeaderExtra}>
              <div>
                <p>今日注册用户</p>
                <p>{userinfo.todayRegisterTotals }</p>
              </div>
              <div>
                <p>订单生成</p>
                <p>{userinfo.todayOrderQuantity }</p>
              </div>
              <div>
                <p>成交金额</p>
                <p>{userinfo.todayOrderTotalMoney }</p>
              </div>
            </div>
          </div>
          <Col xl={24} lg={24} md={24} sm={24} xs={24} >
            <Card
              className={styles.projectList}
              style={{ marginBottom: 24 }}
              title="待办事项"
              bordered={false}
              bodyStyle={{ padding: 0 }}
            >
              <Card
                style={{ width: 200, float: 'left', marginLeft: 10,marginTop:10 }}
                cover={<img style={{marginTop:20}} alt="example" src="./img/icon-4.png" />}
                actions={[<Link to="/account/auditorder"><Button type="primary">去审核</Button></Link>]}
              >
                <Meta
                  title="待审报装订单"
                  description={ String(userinfo.uncheckedInstallOrderCnt) }
                  style={{ fontSize: '20px' }}
                />
              </Card>
              <Card
                style={{ width: 200, float: 'left', marginLeft: 10,marginTop:10 }}
                cover={<img style={{marginTop:20}} alt="example" src="./img/icon-2.png" />}
                actions={[<Link to="/account/repairorder"><Button type="primary">进入</Button></Link>]}
              >
                <Meta
                  title="待审报修订单"
                  description={ String(userinfo.uncheckedRepairOrderCnt) } 
                  style={{ fontSize: '20px' }}
                />
              </Card>
              <Card
                style={{ width: 200, float: 'left', marginLeft: 10,marginTop:10 }}
                cover={<img style={{marginTop:20}} alt="example" src="./img/icon-3.png" />}
                actions={[<Link to="/account/workorde"><Button type="primary">进入</Button></Link>]}
              >
                <Meta
                  title="未完结工单"
                  description={ String(userinfo.uncompleteWorkOrderCnt)  }
                  style={{ fontSize: '20px' }}
                />
              </Card>
              <Card
                style={{ width: 200, float: 'left', marginLeft: 10,marginTop:10 }}
                cover={<img style={{marginTop:20}} alt="example" src="./img/icon-1.png" />}
                actions={[<Link to="/account/speeduporder"><Button type="primary">去审核</Button></Link>]}
              >
                <Meta
                  title="待审提速订单"
                  description={ String(userinfo.uncheckedSpeedOrderCnt)  }
                  style={{ fontSize: '20px' }}
                />
              </Card>
              <Card
                style={{ width: 200, float: 'left', marginLeft: 10,marginTop:10 }}
                cover={<img style={{marginTop:20}} alt="example" src="./img/icon-1.png" />}
                actions={[<Link to="/account/reneworder"><Button type="primary">去审核</Button></Link>]}
              >
                <Meta
                  title="待续费订单"
                  description={ String(userinfo.continuOrderCnt)  }
                  style={{ fontSize: '20px' }}
                />
              </Card>
            </Card>
          </Col>
        </Row>
      </div>
    );
  }
}
